<template>
  <el-dialog
    v-model="dialogVisible"
    title="下载结果文件"
    width="400px"
    @close="resetForm"
  >
    <el-form ref="serviceForm" :model="form" :rules="rules">
      <el-form-item label="" prop="type">
        <div class="type-list">
          <el-button
            v-for="item in loadType"
            :key="item.value"
            :type="item.value === form.type ? 'primary' : ''"
            @click="changeType(item.value)"
          >
            {{ item.label }}
          </el-button>
        </div>
      </el-form-item>
      <el-form-item
        v-if="form.type === 'customDays'"
        label="活跃天数"
        prop="activeDaysThreshold"
      >
        <el-input
          v-model="form.activeDaysThreshold"
          type="number"
          placeholder="请输入活跃天数"
        />
      </el-form-item>
      <el-form-item
        v-if="form.type === 'customHours'"
        label="活跃小时"
        prop="recentHours"
      >
        <el-input
          v-model="form.recentHours"
          type="number"
          placeholder="请输入小时"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="handleConfirm">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { message } from "@/utils/message";
import {
  downloadFilterResultFile,
  downloadHoursResultFile,
  downloadTaskResultFile,
  downloadPhonesOnly
} from "@/api/taskApi";
const submitLoading = ref(false);
const dialogVisible = ref(false);
const taskId = ref(0);
const loadType = [
  {
    label: "最近一天",
    value: "1"
  },
  {
    label: "最近三天",
    value: "3"
  },
  {
    label: "最近七天",
    value: "7"
  },
  {
    label: "全部",
    value: "all"
  },
  {
    label: "手机号",
    value: "phone"
  },
  {
    label: "无效号",
    value: "noPhone"
  },
  {
    label: "自定义天数",
    value: "customDays"
  },
  {
    label: "自定义小时",
    value: "customHours"
  }
];
const form = ref({
  type: "1",
  activeDaysThreshold: 7,
  recentHours: 24
});
const emits = defineEmits(["setDownload"]);
const changeType = str => {
  form.value.type = str;
};
const props = defineProps({
  downloadApi: {
    type: Function,
    default: () => {}
  }
});

// 基础校验规则
const rules: FormRules = {
  activeDaysThreshold: [
    { required: true, message: "请输入活跃天数", trigger: "blur" },
    { pattern: /^[1-9]\d*$/, message: "请输入正确的数字", trigger: "blur" }
  ],
  recentHours: [
    { required: true, message: "请输入小时", trigger: "blur" },
    { pattern: /^[1-9]\d*$/, message: "请输入正确的数字", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value < 1 || value > 24) {
          callback(new Error("请输入1-24之间的整数"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
};

const serviceForm = ref<FormInstance>();
// 重置表单
const resetForm = () => {
  serviceForm.value?.resetFields();
};

const handleConfirm = () => {
  serviceForm.value.validate(async valid => {
    if (valid) {
      try {
        submitLoading.value = true;
        switch (form.value.type) {
          case "1":
          case "7":
          case "3":
            await downloadFilterResultFile(taskId.value, {
              activeDaysThreshold: +form.value.type
            });
            break;
          case "customDays":
            await downloadFilterResultFile(taskId.value, {
              activeDaysThreshold: form.value.activeDaysThreshold
            });
            break;
          case "customHours":
            await downloadHoursResultFile(taskId.value, {
              recentHours: form.value.recentHours
            });
            break;
          case "all":
            await downloadTaskResultFile(taskId.value, {
              fileType: "OUTPUT"
            });
            break;
          case "phone":
            await downloadPhonesOnly(taskId.value, false);
            break;
          case "noPhone":
            await downloadPhonesOnly(taskId.value, true);
            break;
          default:
            break;
        }
        message("下载中，请稍后...", { type: "success" });
        dialogVisible.value = false;
      } catch (error) {
        console.log(error);
      } finally {
        submitLoading.value = false;
      }
    }
  });
};
const open = (id: number) => {
  taskId.value = id;
  dialogVisible.value = true;
};
defineExpose({
  open
});
</script>
<style scoped lang="scss">
.type-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  .el-button {
    margin: 0;
    width: 80px;
  }
}
</style>
